第二堂課所要實作的內容相當簡單，就是要利用JS和CSS來做一個時鐘。範例如下：
JS and CSS Clock實作範例

邏輯流程

本堂課需要完成的有

1. 設定指針的style，包含旋轉軸、旋轉效果
2. 取得時間
3. 將時間換算成時針、分針及秒針的角度

課程重點

關於指針旋轉的CSS：

1. transform-origin：我們的指針是以一端點為軸來旋轉，若不設定transform-origin，其預設是50%，就會是以指針中點為軸旋轉。因此在此實作中需設定為100%。
2. transition：設定過場時間，即秒針轉到下一秒所需要的時間，可以配合transition-timing-function使用，會有更多特別的效果。
3. transition-timing-function：可設定過場的速度。在chrome裡面點選此屬性的小圖示，可顯示視覺化的函數(如下圖所示)，並可用滑鼠拖移其參數，函數中的X軸為過場時間，Y軸為過場動畫的位置。而在課程中老師將參數設定成像真實時鐘般，秒針有點機械回彈的感覺。這部份建議自行操作或是觀看上課影片，較能體會。

延伸閱讀

在此實作中，教材的完整版尚有些地方可以改進。例如原本教材的範例中，時針、分針和秒針都是一樣長度一樣顏色，無法分辨時間。而我們可以利用width、left、background-color等屬性改變指針的長短、顏色。另外有個需注意的是完整版在秒針回到0度時，過場效果會讓他從360度逆時針轉回0度，看起來有點詭異。而老師在課程最後也有提到，這個小bug有兩種解法：

1. 在秒針回到0度時先暫時取消transition過場
2. 讓角度持續累加，不要歸零。